<template>
  <div class="ceshi-one">
    <h1 class="title">测试组件</h1>
    <div class="tabs">
      <el-tabs
        v-model="activeName"
        style="width: 100%"
        type="border-card"
        stretch
      >
        <el-tab-pane label="User" name="user">
            <template #label>
                <div><el-icon><Avatar /></el-icon></div>
                <div>User</div>
            </template>
          <user ref="isLogin"/>
        </el-tab-pane>
        <el-tab-pane label="Config" name="config">
          <config />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="btn">
      <el-button style="width: 100%" type="primary" @click="handleLogin()"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import user from "./user.vue";
import config from "./config.vue";
import { ref } from "vue";
const activeName = ref("user");
const isLogin = ref()

const handleLogin = () => {
  if (activeName.value === "user") {
    isLogin.value.Login()
  } else {
    console.log(activeName.value);
  }
};
</script>

<style scoped>
.ceshi-one {
  width: 330px;
  .title {
    display: flex;
    align-self: center;
    justify-content: center;
  }
  .tabs {
    margin-top: 40px;
    display: flex;
    align-self: center;
    justify-content: center;
  }
  .btn {
    margin-top: 40px;
    display: flex;
    align-self: center;
    justify-content: center;
  }
}
</style>
